
$(function () {
    map();
    function map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map'));
        const getProvinceNumber = async () => {
            let datalist = []
            const res = await fetch('/blockchain-kindness/donations/getProvinceNumber').then(response => response.json()).then(data => datalist = data.data)
            const data = datalist.map(item => ({
                name: item.province,
                value: item.amounts
            }));
            var geoCoordMap = {
                '北京': [116.4074, 39.9042],
                '天津': [117.2009, 39.0841],
                '河北': [114.5024, 38.0454],
                '山西': [112.5495, 37.857],
                '内蒙古': [111.6708, 40.8183],
                '辽宁': [123.4291, 41.8354],
                '吉林': [125.3245, 43.8868],
                '黑龙江': [126.6424, 45.7568],
                '上海': [121.4737, 31.2304],
                '江苏': [118.7783, 32.0617],
                '浙江': [120.1538, 29.2603],
                '安徽': [117.283, 31.8616],
                '福建': [119.3065, 26.0789],
                '江西': [115.8921, 28.6763],
                '山东': [117.0009, 36.6669],
                '河南': [113.6503, 34.7615],
                '湖北': [114.3117, 30.5931],
                '湖南': [112.9823, 28.1957],
                '广东': [113.2806, 23.1291],
                '广西': [108.3219, 22.815],
                '海南': [110.3522, 20.0312],
                '重庆': [106.5516, 29.563],
                '四川': [104.0657, 30.6504],
                '贵州': [106.7082, 26.5783],
                '云南': [102.7123, 25.0406],
                '西藏': [91.1322, 29.665],
                '陕西': [108.948, 34.2654],
                '甘肃': [103.7933, 36.059],
                '青海': [101.7789, 36.6212],
                '宁夏': [106.2704, 38.4663],
                '新疆': [87.6177, 43.793],
                '香港': [114.1733, 22.3193],
                '澳门': [113.5491, 22.1987],
                '台湾': [121.3047, 25.0478]
            };

            var str = function(data){
                data = data + ""
                console.log(data)
                return data.split(',')[2]
            }
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                console.log(res)
                return res;
            };

            option = {
                // backgroundColor: '#404a59',
                title: {
                    text: '爱心捐款分布图',
                    subtext: '来源：链上善行',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        console.log(params + " 312321321321321321")
                        return `捐款金额:` + str(params.data.value);
                    }
                },

                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    roam: false,
                    zoom: 1.2,
                    itemStyle: {
                        normal: {
                            areaColor: 'rgba(2,37,101,.5)',
                            borderColor: 'rgba(112,187,252,.5)'
                        },
                        emphasis: {
                            areaColor: 'rgba(2,37,101,.8)'
                        }
                    }
                },
                series: [
                    {
                        name: '捐款款数', 
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data),
                        symbolSize: function (val) {
                            return val[2] / 300;
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#ffeb7b'
                            }
                        }
                    }

                ]
            };
            console.log(convertData(data))
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
        getProvinceNumber()
    }

})

